<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="card">
      <el-input placeholder="请输入内容"  class="input-with-select" style="width: 400px"  v-model="query"  >
        <el-button slot="append" icon="el-icon-search"@click="getlist"></el-button>
      </el-input>
      <el-button type="primary" class="btn" @click="add">添加用户</el-button>
      <el-table
          :data="list"
          :stripe="true"
          border
          style="width: 95%; margin: 20px;">
        <el-table-column
          type="index"
            width="180">
        </el-table-column>
        <el-table-column
            prop="username"
            label="姓名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="email"
            label="邮箱">
        </el-table-column>
        <el-table-column
            prop="mobile"
            label="电话">
        </el-table-column>
        <el-table-column
            prop="role_name"
            label="角色">
        </el-table-column>
        <el-table-column
            prop="mg_state"
            label="状态">
          <template slot-scope="scope">
            <el-switch
                @change="zhuangtai(scope.row)"
               v-model="scope.row.mg_state"
                active-color="#409eff"
                inactive-color="#dcdfe6">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
            label="操作">
          <template slot-scope="scope">
          <el-button type="success" class="btn1" icon="el-icon-edit" circle :circle="false" @click="edit(scope.row.id)"></el-button>
          <el-button type="danger" class="btn1" icon="el-icon-delete" circle circle :circle="false" @click="removeUserByid(scope.row.id)"></el-button>
          <el-button type="warning" class="btn1" icon="el-icon-setting" circle circle :circle="false" @click="closefenpeijueseList(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
            class="fooer"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagenum"
            :page-sizes="[1, 2,5, 10]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
      <el-dialog
          @close="closeform"
          title="添加用户"
          :visible.sync="xianshi"
          width="50%"
          >
        <el-form :model="addform" status-icon :rules="rules" ref="form" label-width="70px" >
        <el-form-item label="用户名" prop="username">
          <el-input  v-model="addform.username" autocomplete="off"></el-input>
        </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input  v-model="addform.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input  v-model="addform.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input  v-model="addform.mobile" autocomplete="off"></el-input>
          </el-form-item>
          </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button  @click="xianshi=false" >取 消</el-button>
    <el-button type="primary" @click="addUser">确 定</el-button>
  </span>
      </el-dialog>
      <el-dialog
          @close="editclose"
          title="修改用户信息"
          :visible.sync="editdiago"
          width="50%">
        <el-form :model="formedit" status-icon :rules="editrules" ref="changeform" label-width="70px" >
          <el-form-item label="用户名" >
            <el-input
                placeholder="请输入内容"
                v-model="formedit.username"
                :disabled="true">
            </el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input  v-model="formedit.email" ></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input  v-model="formedit.mobile" ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="editdiago = false">取 消</el-button>
    <el-button type="primary" @click="editUserInfor">确 定</el-button>
  </span>
      </el-dialog>
<!--      分配角色的dialog-->
      <el-dialog
          title="分配角色"
          :visible.sync="fenpeishow"
          width="50%"
      @close="closefenpei">
        <div  class="dia">
          <p>当前用户:{{userinfo.username}}</p>
          <p>当前角色:{{userinfo.role_name}}</p>
          <p>分配角色:
            <el-select v-model="valueroleid" placeholder="请选择">
              <el-option
                  v-for="item in rolesList"
                  :key="item.id"
                  :label="item.roleName"
                  :value="item.id">
              </el-option>
            </el-select>
          </p>
        </div>
        <span slot="footer" class="dialog-footer">
    <el-button @click="fenpeishow = false">取 消</el-button>
    <el-button type="primary" @click="selectroleinfo">确 定</el-button>
  </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {changeList, del, falses, getjuesefenpei, getjueseList, idchange, meuns2, users} from "@/api/user";

export  default  {
  data() {
    return {
      input:'',
      editdiago:false,
      dialogVisible: false,
      pagenum:1,
      pagesize:2,
      total:0,
      show:false,
      list:[],
      formedit:{
        username:'',
        email:'',
        mobile:''
      },
      query:'',
      xianshi:false,
      addform:{
        username:'',
        password:'',
        email:'',
        mobile:'',
      },
      rules:{
        username:[
          {
            required:true,
            message:'请输入用户名',
            trigger:'blur'
          },
          {
            min:3,
            max:11,
            message: '用户名长度不符合规定',
            trigger:'blur'
          }
        ],
        password:[
          {
            required:true,
            message:'请输入密码',
            trigger:'blur'
          },
          {
            min:6,
            max:14,
            message: '密码长度不符合规定',
            trigger:'blur'
          }
        ],
        email:[
          {
            required:true,
            message:'请输入邮箱',
            trigger:'blur'
          },
          {
            pattern:/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
            trigger: ['blur', 'change'],
            message:'邮箱格式错误'
          }
        ],
        mobile:[
          {
            required:true,
            message:'请输入手机号',
            trigger:'blur'
          },
          {
            pattern:/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: '手机号格式错误',
            trigger:['blur', 'change'],
          }
        ]
      },
      editrules:{
        email:[
          {
            required:true,
            message:'请输入邮箱',
            trigger:'blur'
          },
          {
            pattern:/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
            trigger: ['blur', 'change'],
            message:'邮箱格式错误'
          }
        ],
        mobile:[
          {
            required:true,
            message:'请输入手机号',
            trigger:'blur'
          },
          {
            pattern:/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: '手机号格式错误',
            trigger:['blur', 'change'],
          }]
          },
      email:[
        {
          required:true,
          message:'请输入邮箱',
          trigger:'blur'
        },
        {
          pattern:/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
          trigger: ['blur', 'change'],
          message:'邮箱格式错误'
        }
      ],
      mobile:[
        {
          required:true,
          message:'请输入手机号',
          trigger:'blur'
        },
        {
          pattern:/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
          message: '手机号格式错误',
          trigger:['blur', 'change']
        }],
      fenpeishow:false,
      userinfo:{},
      rolesList:[],
      valueroleid:''
    }
  },
  created() {
    this.getlist()
  },
  methods: {

    closeform() {
      this.$refs.form.resetFields()
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    async handleSizeChange(news) {
      console.log(news);
      this.pagesize=news
     const res =  await meuns2({
       pagenum:this.pagenum,
       pagesize:this.pagesize
     })
       this.list=res.data.users
      // console.log(this.list)
    },
   async handleCurrentChange(val) {
      console.log(val);
      this.pagenum=val
      const res =  await meuns2({
        pagenum:this.pagenum,
        pagesize:this.pagesize
      })
     this.list=res.data.users
    },
    async getlist() {
      const res = await meuns2({
        pagenum:this.pagenum,
        pagesize:this.pagesize,
        query:this.query
      })
      // console.log(res)
      // console.log(this.list)
      this.list=res.data.users
      this.total=res.data.total
    },
    add() {
this.xianshi=true
    },
    async zhuangtai(news) {
      console.log(news)
      const id =news.id
      const state = news.mg_state
  const res =  await falses(id,state)
      console.log(res)
      this.$message.success('更新状态成功')
      if(res.meta.status!==200) {
        news.mg_state=!news.mg_state
        this.$message.error('更新状态失败')
      }
    },
    async addUser() {
      const res = await this.$refs.form.validate()
      // console.log(res)
      if(res) {
        const add = await users(this.addform)
        console.log(add.data)
        this.getlist()
        this.xianshi=false
        this.$message.success('添加成功')
      }else {
        this.$message.error('添加失败')
      }
       },
    async edit(ee) {
      // console.log(ee)
      this.editdiago=true
      const res = await idchange(ee)
      console.log(res)
      if(res.meta.status!==200) return this.$message.error('查询用户信息失败')
      console.log(res.data)
      this.formedit = res.data
      // console.log(this.formedit)
    },
    editclose() {
      this.$refs.changeform.resetFields()
    },
    async editUserInfor() {
      const res = await this.$refs.changeform.validate()
      // console.log(res)
      if(res) {
const res1 = await changeList(this.formedit.id,{
  email:this.formedit.email,
  mobile:this.formedit.mobile
})
        console.log(res1)
        this.formedit=res1.data
        this.editdiago=false
         this.getlist()
      }
    },
   async removeUserByid(id) {
    const res=  await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err=>err)
     console.log(res)
     if(res!=='confirm') {
      return this.$message.info('已取消删除')
     }
    const res1 = await del(id)
     console.log(res1)
     if(res1.meta.status!==200) return
     this.$message.success('删除成功')
     this.getlist()
     // this.pagenum=1
    },
    closefenpei() {
      this.valueroleid='',
          this.userinfo={}
    },
   async closefenpeijueseList(row) {
      const res = await getjueseList()
     // console.log(res)
     this.rolesList=res.data
      this.userinfo=row
this.fenpeishow=true
    },
    async selectroleinfo() {
      if(!this.valueroleid) {
        return this.$message.error('请选择要分配的角色')
      }
      const res1 = await getjuesefenpei(this.userinfo.id,{rid:this.valueroleid})
      if(res1.meta.status!==200) {
        return this.$message.error('更新角色失败')
      }
      this.$message.success('更新角色成功')
      this.getlist()
      this.fenpeishow=false
    }
  },


}
</script>
<style lang="less" scoped>
.card {
margin-top: 30px;
  background-color: #fff;
  width: 1300px;
  //height: 290px;
}
.input-with-select {
  margin-top: 20px;
  margin-left: 20px;
}
.btn {
  margin-left: 20px;
}
.btn1 {
  width: 43px;
  height: 27px;
  padding: 5px;
}
.block {
  margin-left: 10px;
}
.fooer {
  height: 30px;
 margin-bottom:20px ;
}
.boss{
  background-color: pink;
  position: absolute;
  width: 700px;
  height: 400px;
  z-index: 1;
  top: 100px;
  left: 300px;
}
p{
  margin: 30px;
}
</style>